<!--  -->
<template>
  <div class="model-open-detailed common-code-table">
    <div class="header">
      <ul class="header-content-box">
        <li class="left">
          <img :src="modelDetailCon.modelCover ? modelDetailCon.modelCover : dattSetImgUrl" alt="">
        </li>
        <li class="middle">
          <div class="middle-top">
            <h4 class="header-title">{{modelDetailCon.modelName?modelDetailCon.modelName:'--'}}</h4>
            <span class="model-focus" v-if="modelUserId !== userInfo.userId">
              <span class="focus-text" :class="{'focus-text-active': !lickFocusBtn}" @click="clickFocusFun">
                <i :class="{'icon-focus': lickFocusBtn, 'icon-focus-no': !lickFocusBtn}"></i>
                {{ lickFocusBtn ? '已关注' : '关注' }}
              </span>
              <span class="focus-number">{{ focusNum }}</span>
            </span>
            <!-- <div class="look" @click="clickFocusFun()" v-if="modelUserId !== userInfo.userId">
              <div class="look-left">
                <i class="icon icon-look" :class="{'focus-model': !lickFocusBtn}"></i>
                <span v-if="!lickFocusBtn">关注</span>
                <span v-if="lickFocusBtn">已关注</span>
              </div>
              <div class="look-right">{{focusNum}}</div>
            </div> -->
          </div>
          <ul class="header-list">
            <li class="list-item">
              <p class="list-box list-box-top"><span>使用次数</span>{{modelDetailCon.useNum?modelDetailCon.useNum:'0'}}次</p>
            </li>
            <li class="list-item">
              <p class="list-box list-box-top"><span>开发者</span>{{modelDetailCon.username?modelDetailCon.username:'--'}}</p>
            </li>
            <li class="list-item">
              <p class="list-box"><span>时间</span>{{modelDetailCon.createTime?new Date(modelDetailCon.createTime).Format("yyyy-MM-dd"):'--'}}</p>
            </li>
            <li class="list-item">
              <p class="list-box"><span>算法框架</span>{{modelDetailCon.framework?modelDetailCon.framework:'--'}}</p>
            </li>
            <li class="list-item">
              <p class="list-box"><span>编程语言</span>{{modelDetailCon.language?modelDetailCon.language:'--'}}</p>
            </li>
          </ul>
        </li>
      </ul>
      <ul class="nav-list">
        <li class="main-nav-list nav-left clearfix">
          <ul class="main-nav-list-container">
            <li class="nav-item link-item" :class="{'active': activeTab === 1}" @click="toggleActive(1)">
              基本信息
            </li>
            <li class="nav-item link-item" :class="{'active': activeTab === 2}" @click="toggleActive(2)">
              模型文件
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="content">
      <div v-if="activeTab === 1">
        <div class="basic">
          <h4 class="basic-title">模型介绍</h4>
          <p class="basic-text">{{modelDetailCon.modelIntroduction?modelDetailCon.modelIntroduction:'--'}}</p>
          <div class="basic-con">
            <h4 class="basic-title">使用该模型的项目</h4>
            <ul class="data-list">
              <li class="item" v-for="(item, index) in openPublicModels" :key="index" @click="goprojectFun(item.id)">
                <div class="item-top">
                  <div class="item-bg">
                    <img :src="item.fileImage ? item.fileImage : dattSetImgUrl" alt="">
                  </div>
                  <ul class="item-tag" v-if="item.categoryList && item.categoryList.length>0">
                    <li class="tag-list" v-for="(categoryitem, categoryindex) in item.categoryList" :key="categoryindex">{{categoryitem.name}}</li>
                  </ul>
                </div>
                <div class="item-con">
                  <h4 class="tit">{{item.projectName}}</h4>
                  <p class="text-con">{{item.profile}}</p>
                  <ul class="list-box">
                    <li class="list-item">
                      <i class="icon icon-user"></i>{{item.language}}
                    </li>
                    <li class="list-item">
                      <i class="icon icon-look"></i>{{item.algorithm}}
                    </li>
                  </ul>
                  <div class="share">
                    <i class="icon icon-share"></i>{{item.copyNumber}}
                  </div>
                </div>
              </li>
            </ul>
            <div class="loadmore" v-if="hasNextPageProject">
              <p class="loadmore-box" @click="loadMorePublic">
                <i v-show="loadingMorePublic" class="el-icon-loading"></i>
                <span v-show="!loadingMorePublic">加载更多...</span>
              </p>
            </div>
            <div v-show="openPublicModels.length === 0">
              <div class="no-data-con">
                <!-- <img src="@/common/image/nocontent.png"> -->
                <p class="no-data-title">暂无数据</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="activeTab === 2">
        <div class="table-code-content">
          <div class="filepath-header">
            <div class="filepath-header-left">
              <img class="file-icon" src="@/common/image/icon/folder.png">
              <div class="breadcrumb" v-if="curFilePath === '/'">
                <span class="file-path" @click="clickFilePath('/')">/model/{{modelDetailCon.account}}</span>
              </div>
              <div class="breadcrumb" v-else>
                <span class="file-path" @click="clickFilePath('/')">/model/{{modelDetailCon.account}}</span>
                <span class="file-path" v-for="(item, key) in filePath.slice(1)" :key="key" @click="clickFilePath(item, key)">/{{item}}</span>
              </div>
            </div>
          </div>
          <div class="file-table" v-show="showEditor === 0">
            <el-table
              :data="fileList"
              style="width: 100%"
              :header-row-class-name="handleTableHeaderclass">
              <!-- <el-table-column type="selection" width="40" :selectable="false"></el-table-column> -->
              <el-table-column
                label="文件/文件夹名称"
                :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <div class="table-link" @click="clickTableRow(scope.row)">
                    <i :class="{'file-pic': scope.row.isImg, 'file-icon': !scope.row.directory && !scope.row.isImg, 'folder-icon': scope.row.directory}"></i>
                    <span>{{ scope.row.fileName }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="updateTime"
                label="修改日期"
                width="200">
                <template slot-scope="scope">
                  <span>{{ new Date(scope.row.updateTime).Format("yyyy-MM-dd hh:mm:ss") }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="size"
                label="大小"
                width="150">
                <template slot-scope="scope">
                  <span>{{ scope.row.size ? scope.row.size : '--' }}</span>
                </template>
              </el-table-column>
            </el-table>
            <div class="basePagenate">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-size="pageSize"
                :current-page="pageNumber"
                :total="totalPage"
                layout="prev, pager, next">
              </el-pagination>
            </div>
            <div class="markdown-box" v-if="showMarkdown">
              <div class="header-markdown">
                <span class="header-left"><img src="@/common/image/icon/book-open-variant.png">README.md</span>
              </div>
              <viewer
                v-show="!editMarkdown"
                :value="readmeData"
                height="500px"
                class="markdown-content"
              />
            </div>
          </div>
        </div>
      </div>
      <el-dialog
        title="图片浏览"
        :visible.sync="dialog.picPreview"
        :pos="'center'"
        width="40%">
        <div class="file-panel picPreview">
          <img :src="curPicPreView" />
        </div>
      </el-dialog>
      <!-- <div slot="footer" class="dialog-footer basebtn">
        <div>
          <button @click="dialog.picPreview=false" class="dialog-button active last">关 闭</button>
        </div>
      </div> -->
      <!-- 文件编辑查看 -->
      <div v-show="showEditor === 1" class="editor-container">
        <div class="editor-header">
          <span>{{curEditFile.fileName}}</span>
          <div v-show="showEdit" class="action r action-right"><i class="icon-cancle" /><span class="action-span-hover" @click="doCancle">取消</span></div>
        </div>
        <div class="code-eidtor">
          <div ref="container" id="container" style="width:100%;height:700px;border:1px solid #ddd"></div>
        </div>
      </div>
      <div v-show="showEditor === 2" class="editor-container">
        <div class="editor-header">
          <span>{{curEditFile.fileName}}</span>
          <div v-show="!showMDEdit" class="action r action-right"><i class="icon-cancle" /><span class="action-span-hover" @click="doCancle">取消</span></div>
        </div>
        <viewer
          v-show="!showMDEdit"
          :value="markdownData"
          height="500px"
          class="md-content"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getModelDetail, attentionModel, getUserAttentionStatus, getProjectByModelId } from '@/api/model'
import { getFileListForModel } from '@/api/filecenter'
import { verifyFileType } from '@/common/js/utils'
import { mapGetters } from 'vuex'
import axios from 'axios'
import * as monaco from 'monaco-editor'
import dataSetImg from '@/common/image/dataset.jpg'
import 'tui-editor/dist/tui-editor.css'
import 'tui-editor/dist/tui-editor-contents.css'
import 'codemirror/lib/codemirror.css'

import { Viewer } from '@toast-ui/vue-editor'
export default {
  components: {
    'viewer': Viewer
  },
  data () {
    return {
      // 模型默认图片
      dattSetImgUrl: dataSetImg,
      lickFocusBtn: false,
      focusNum: '--',
      clickFocus: true,
      // 文件列表
      fileList: [],
      // 文件路径
      filePath: ['/'],
      // 当前文件路径
      curFilePath: '/',
      // 文件总数
      totalPage: 0,
      // 每页条数
      pageSize: 10,
      // 当前页
      pageNumber: 1,
      modelDetailCon: [],
      finished: false,
      // 当前页
      pageNumberProject: 1,
      // 每页显示条数
      pageSizeProject: 8,
      // 是否有下一页
      hasNextPageProject: false,
      openPublicModels: [],
      modelUserId: '',
      modelNameText: '',
      loadingMorePublic: false,
      bottom: false,
      // 弹窗显隐
      dialog: {
        picPreview: false
      },
      // 文件内容
      fileContent: '',
      // 文件内容 原始
      fileContentOriginal: '',
      // 显示编辑器
      showEditor: 0,
      // 编辑器显示编辑按钮
      showEdit: true,
      showMDEdit: false,
      // 编辑器是否可编辑
      readOnly: true,
      // 当前编辑文件
      curEditFile: '',
      // 当前浏览图片
      curPicPreView: '',
      editor: '',
      // md文件内容
      markdownData: '',
      // readme文件内容
      readmeData: '',
      // 展示Markdown
      showMarkdown: false,
      // 编辑markdown
      editMarkdown: false,
      typenoMess: false,
      editorOptions: {
        hideModeSwitch: true
      }
    }
  },

  computed: {
    // 当前激活Tab页
    activeTab: {
      get: function () {
        if (this.$route.query.active) {
          return Number(this.$route.query.active)
        } else {
          return 1
        }
      }
    },
    ...mapGetters([
      'userInfo'
    ])
  },

  beforeMount () {
    window.addEventListener('scroll', this.handleScroll)
  },

  mounted () {
    this._getModelDetail()
    this._getUserAttentionStatus()
  },

  methods: {
    toggleActive (val) {
      if (this.typenoMess) {
        return false
      }
      if (val === 1) {
        this.openPublicModels = []
        this.pageNumberProject = 1
        this.hasNextPageProject = false
        this.$router.push({ path: '/modellump/opendetailed', query: { active: 1, modelId: this.$route.query.modelId, modelName: this.$route.query.modelName, type: this.$route.query.type } })
        this._getProjectByModelId()
      } else {
        this.curFilePath = '/' + this.$route.query.modelName
        if (this.curFilePath === '/') {
          this.filePath = ['/']
        } else {
          let arr = this.curFilePath.split('/')
          arr[0] = '/'
          this.filePath = arr
        }
        this.pageNumber = 1
        this.$router.push({ path: '/modellump/opendetailed', query: { active: 2, modelId: this.$route.query.modelId, modelName: this.$route.query.modelName, type: this.$route.query.type } })
        this._getFileList(this.curFilePath)
      }
    },
    doCancle () {
      this.showEditor = 0
    },
    clickFocusFun () {
      if (this.clickFocus) {
        this._attentionModel()
      } else {
        return false
      }
    },
    handleTableHeaderclass () {
      return 'table-head-th'
    },
    // 分页
    handleSizeChange (val) {
      this.pageSize = val
      this.pageNumber = 1
      this._getFileList(this.curFilePath)
    },
    handleCurrentChange (val) {
      this.pageNumber = val
      this._getFileList(this.curFilePath)
    },
    // 点击Table列
    clickTableRow (row) {
      if (row.directory) {
        this.goToFolder(row.fileName)
        this.showEditor = 0
      } else if (row.isImg) {
        this.dialog.picPreview = true
        this._previewImg(row).then(res => {
          this.curPicPreView = URL.createObjectURL(res)
        })
      } else {
        let fileType = row.fileName.replace(/.+\./, '')
        if (fileType === 'md') {
          this.curEditFile = row
          this.fileContent = ''
          this._getFileContent(row.fileName, true)
          this.showEditor = 2
        } else if (verifyFileType(fileType)) {
          this.curEditFile = row
          this.fileContent = ''
          this._getFileContent(row.fileName)
          this.showEditor = 1
        } else {
          this.$message({ message: '暂不支持该文件类型预览', showClose: true, type: 'warning' })
        }
      }
    },
    // 点击文件夹
    goToFolder (dir) {
      if (this.clickFileBtn) {
        this.pageNumber = 1
        this.clickFileBtn = false
        if (this.curFilePath === '/') {
          this.curFilePath = `/${dir}`
        } else {
          this.curFilePath = `${this.curFilePath}/${dir}`
        }
        this.filePath.push(dir)
        this._getFileList(this.curFilePath)
      }
    },
    // 点击文件路径
    clickFilePath (val, key) {
      this.pageNumber = 1
      if (val === '/') {
        return false
      } else {
        if (val === '/') {
          this.curFilePath = '/'
          this.filePath = ['/']
          this._getFileList('/')
        } else {
          let path = ''
          let pathArr = this.filePath.slice(0, key + 2)
          this.filePath = pathArr
          pathArr.map((item, index) => {
            if (index === 0) {
              path = item
            } else if (index === 1) {
              path = path + item
            } else {
              path = `${path}/${item}`
            }
          })
          this.curFilePath = path
          this._getFileList(path)
        }
      }
    },
    goprojectFun (agm) {
      this.$router.push({ path: '/openproject/detail', query: { id: agm } })
    },
    // 处理滚动事件
    handleScroll () {
      let footerHeight = document.getElementById('footer').clientHeight
      let scrollY = window.scrollY
      let visible = document.documentElement.clientHeight
      let pageHeight = document.documentElement.scrollHeight - (footerHeight / 2)
      let bottomOfPage = visible + scrollY >= pageHeight
      this.bottom = bottomOfPage || pageHeight < visible
    },
    loadMorePublic () {
      this.loadingMorePublic = true
      this.pageNumberProject++
      this._getProjectByModelId()
    },
    /*
      -----接口调用-----
    */
    // 查询文件列表
    _getFileList (path) {
      let para = `?type=4&dir=${path}&pageNumber=${this.pageNumber}&pageSize=${this.pageSize}&userId=${this.modelUserId}`
      getFileListForModel(para).then(res => {
        if (res.message.code === 0) {
          this.totalPage = res.data.totalCount
          this.fileList = res.data.fileList
          // 判断是否是图片
          let imgExt = ['.png', '.jpg', '.jpeg', '.bmp', '.gif']
          if (this.fileList) {
            this.fileList.forEach(el => {
              let isImg = imgExt.contain(el.fileName.extension())
              el.isImg = isImg
              if (isImg) {
                let preOpt = {}
                let separator = this.curFilePath === '/' ? '' : '/'
                preOpt.src = `/gateway/fileCenter/api/file/preview?type=1&path=${this.curFilePath + separator + el.fileName}`
                el.preOpt = preOpt
              }
            })
          }
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
        this.clickFileBtn = true
      })
    },
    /*
      description: 下载文件内容
      fileName: 文件名
      isMDFile: 是否markdown类型文件
    */
    _getFileContent (fileName, isMDFile = false) {
      let separator = ''
      let fileUrl = ''
      if (fileName) {
        separator = this.curFilePath === '/' ? '' : '/'
        fileUrl = `/gateway/fileCenter/api/file//previewForModel?type=4&path=${this.curFilePath + separator + fileName}&userId=${this.modelUserId}`
      } else {
        fileUrl = `/gateway/fileCenter/api/file//previewForModel?type=4&path=/${this.curProject.projectName}/code/README.md&userId=${this.modelUserId}`
      }
      axios({
        method: 'get',
        url: fileUrl
      }).then(res => {
        if (fileName && !isMDFile) {
          this.fileContent = res.data
          this.fileContentOriginal = res.data
          this.$refs.container.innerHTML = ''
          this.editor = monaco.editor.create(document.getElementById('container'), {
            value: '',
            language: 'python',
            readOnly: true
          })
          if (typeof this.fileContent === 'object') {
            this.fileContent = res.request.response
            this.fileContentOriginal = res.request.response
            this.editor.setValue(this.fileContent)
          } else {
            this.editor.setValue(String(this.fileContent))
          }
        } else if (fileName && isMDFile) {
          if (res.data === '') {
            this.showEditor = 0
          } else {
            this.showEditor = 2
            this.markdownData = res.data
            this.fileContentOriginal = res.data
          }
        } else {
          if (res.data === '') {
            this.showMarkdown = false
          } else {
            this.showMarkdown = true
            this.readmeData = res.data
            this.fileContentOriginal = res.data
          }
        }
      })
    },
    // 预览图片
    _previewImg (row) {
      let separator = this.curFilePath === '/' ? '' : '/'
      let fileUrl = `/gateway/fileCenter/api/file/previewForModel?type=4&path=${this.curFilePath + separator + row.fileName}&userId=${this.modelUserId}`
      return axios({
        method: 'get',
        url: fileUrl,
        responseType: 'blob',
        emulateJSON: true
      }).then(res => {
        return Promise.resolve(res.data)
      })
    },
    // 公开模型详情
    _getModelDetail () {
      let query = ''
      query = `?modelId=${this.$route.query.modelId}&type=${this.$route.query.type}`
      getModelDetail(query).then(res => {
        if (res.message.code === 0) {
          this.modelDetailCon = res.data
          this.modelNameText = res.data.modelName
          this.modelUserId = res.data.userId
          if (this.$route.query.active && Number(this.$route.query.active) === 2) {
            this.toggleActive(2)
          } else {
            this.toggleActive(1)
          }
        } else if (res.message.code === 20012) {
          this.$message({ message: '你没有该模型的查看权限', showClose: true, type: 'error' })
          this.typenoMess = true
          this.$router.push({ path: '/modellump', query: { active: 1, category: 'ALL' } })
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 确定用户是否关注模型
    _getUserAttentionStatus () {
      let query = ''
      query = `?modelId=${this.$route.query.modelId}`
      getUserAttentionStatus(query).then(res => {
        if (res.message.code === 0) {
          this.lickFocusBtn = res.data.attentionFlag
          this.focusNum = res.data.attentionCount
        } else {
          return false
        }
      })
    },
    // 公开模型详情项目列表
    _getProjectByModelId () {
      let query = ''
      query = `?pageNumber=${this.pageNumberProject}&pageSize=${this.pageSizeProject}&modelId=${this.$route.query.modelId}&type=${this.$route.query.type}`
      this.finished = true
      getProjectByModelId(query).then(res => {
        this.loadingMorePublic = false
        if (res.message.code === 0) {
          this.hasNextPageProject = res.data.hasNextPage
          this.openPublicModels = this.openPublicModels.concat(res.data.list)
          // this.openTotalNum = res.data.total
          if (this.hasNextPageProject) {
            this.finished = false
          }
        } else {
          return false
        }
      })
    },
    // 关注
    _attentionModel () {
      let query = ''
      let attentionFlagid
      if (this.lickFocusBtn) {
        attentionFlagid = 0
      } else {
        attentionFlagid = 1
      }
      this.clickFocus = false
      query = `?modelId=${this.$route.query.modelId}&attentionFlag=${attentionFlagid}`
      attentionModel(query).then(res => {
        if (res.message.code === 0) {
          this.lickFocusBtn = !this.lickFocusBtn
          if (attentionFlagid === 1) {
            this.focusNum = this.focusNum + 1
          } else {
            this.focusNum = this.focusNum - 1
          }
          this.clickFocus = true
        } else if (res.message.code === -1) {
          this.clickFocus = true
          this.$message({ message: '登录超时，请重新登录', showClose: true, type: 'warning' })
        } else if (res.message.code === 1000) {
          this.clickFocus = true
          this.$message({ message: '模型ID不能为空', showClose: true, type: 'warning' })
        } else if (res.message.code === 1001) {
          this.clickFocus = true
          this.$message({ message: '模型关注标记不能为空', showClose: true, type: 'warning' })
        } else if (res.message.code === 1002) {
          this.clickFocus = true
          this.$message({ message: '模型关注标记错误', showClose: true, type: 'warning' })
        } else if (res.message.code === 1003) {
          this.clickFocus = true
          this.$message({ message: '模型不存在', showClose: true, type: 'warning' })
        } else if (res.message.code === 1004) {
          this.clickFocus = true
          this.$message({ message: '用户不可以关注自己的模型', showClose: true, type: 'warning' })
        } else if (res.message.code === 1005) {
          this.clickFocus = true
          this.$message({ message: '用户并未关注该模型', showClose: true, type: 'warning' })
        } else if (res.message.code === 1006) {
          this.clickFocus = true
          this.$message({ message: '用户关注模型失败', showClose: true, type: 'warning' })
        } else if (res.message.code === 1007) {
          this.clickFocus = true
          this.$message({ message: '用户已经关注该模型', showClose: true, type: 'warning' })
        } else if (res.message.code === 1008) {
          this.clickFocus = true
          this.$message({ message: '用户关注模型失败', showClose: true, type: 'warning' })
        } else if (res.message.code === 20001) {
          this.clickFocus = true
          this.$message({ message: '用户关注模型失败', showClose: true, type: 'warning' })
        } else if (res.message.code === 1012) {
          this.clickFocus = true
          this.$message({ message: '模型未公开', showClose: true, type: 'warning' })
        }
      })
    }
  },
  watch: {
    bottom: function (bottom) {
      if (this.finished === true) {
        return
      }
      if (bottom) {
        if (this.activeTab === 1) {
          if (this.hasNextPageProject) {
            this.loadingMorePublic = true
            this.pageNumberProject++
            this._getProjectByModelId()
          }
        } else {
          return false
          // if (this.curSelectedMyDataSet === 0) {
          //   this._getDataSetList()
          // } else {
          //   this._getUserDataSet(this.curSelectedMyDataSet)
          // }
        }
      }
    }
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
  }
}

</script>
<style lang="stylus">
@import "../../common/stylus/common_code_table"
@import "../../common/stylus/mixin"
@import "../../common/stylus/base"
line-clamp(n)
  word-break break-all
  word-wrap break-word
  overflow hidden
  text-overflow ellipsis
  display -webkit-box
  /*! autoprefixer: off */
  -webkit-box-orient vertical
  /* autoprefixer: on */
  -webkit-line-clamp n
.model-open-detailed
  display flex
  flex-flow column
  font-family PingFangSC-Regular
  .header
    background #f4f7f8
    .header-content-box
      display flex
      width 100%
      margin 0 auto
      max-width 1162px
      display flex
      align-items flex-start
      flex-flow row nowrap
      padding-top 30px
      padding-bottom 36px
      .left
        width 188px
        max-height 112px
        margin-right 27px
        padding-top 0px
        img
          width 100%
          max-height 112px
      .middle
        flex 1
        padding-top 10px
        .middle-top
          display flex
          .model-focus
            font-size 14px
            color #2d323b
            display flex
            align-items center
            .focus-text-active
              color #3C4349!important
            .focus-text
              background #f1f2f2
              border 1px solid #d1d2d3
              border-radius 3px 0px 0px 3px
              padding 4px 11px
              display flex
              align-items center
              height 20px
              line-height 20px
              box-sizing content-box
              color #3C4349
              &:hover
                color #4285f4
                cursor pointer
              .icon-focus
                width 13px
                margin-right 2px
                background url('../../common/image/icon/icon-focus-no.png') no-repeat
                background-size 13px 13px
                height 13px
                display inline-block
              .icon-focus-no
                width 13px
                margin-right 2px
                background url('../../common/image/icon/model-look-icos.png') no-repeat
                background-size 13px 13px
                height 13px
                display inline-block
            .focus-number
              background #fff
              border 1px solid #d1d2d3
              border-radius 0px 3px 3px 0px
              padding 4px 11px
              border-left none
              height 20px
              line-height 20px
              box-sizing content-box
        .header-title
          flex 1
          font-size 22px
          line-height 30px
          color #24292E
          margin-bottom 24px
          line-clamp(1)
          font-weight 600
        .header-list
          display flex
          .list-item
            display inline-block
            margin-right 31px
            max-width 250px
            overflow hidden
            .list-box
              font-size 14px
              line-height 20px
              height 20px
              color #001400
              line-clamp(1)
              span
                margin-right 12px
                color #808080
            .list-box-top
              margin-bottom 8px
    .nav-list
      width 100%
      position relative
      margin 0 auto
      max-width 1162px
      display flex
      .main-nav-list
        height 100%
        .main-nav-list-container
          display flex
          height 100%
          align-items flex-end
          .icon
            display inline-block
            width 30px
            height 50px
          .icon-open-ico
            background url(../../common/image/icon-project/data-set--left-ico-no.png) no-repeat center
            background-size 16px 16px
          .icon-my-ico
            background url(../../common/image/icon-project/data-set-two-ico-no.png) no-repeat center
            background-size 16px 16px
          .nav-item
            padding 0 10px
            font-weight 600
            font-size 14px
            display flex
            color #666
            justify-content center
            align-items center
            cursor pointer
            position relative
            margin 0
            >a
              color #666
              text-decoration none
              cursor pointer
            >a:before
              content ''
              position absolute
              top 0
              right 0
              bottom 0
              left 0
          .link-item
            padding 0 38px
            height 44px
        .nav-item.active
          font-weight bold
          color #2d323b
          background #fff
          box-shadow 0 14px 0 -10px #f3c922 inset
          border-radius 5px 5px 0 0
          .icon-open-ico
            background url(../../common/image/icon-project/data-set--left-ico.png) no-repeat center
            background-size 16px 16px
          .icon-my-ico
            background url(../../common/image/icon-project/data-set-two-ico.png) no-repeat center
            background-size 16px 16px
  .loadmore
    display flex
    align-items center
    justify-content center
    height 50px
    .loadmore-box
      height 40px
      line-height 40px
      font-size 16px
      width 50%
      display flex
      align-items center
      justify-content center
      background #f5f7fa
      cursor pointer
  .no-data-con
    font-size 14px
    color #2D323B
    padding 10px 0
  .content
    width 100%
    margin 0 auto
    max-width 1162px
    .basic
      padding-top 40px
      .basic-title
        font-size 16px
        line-height 22px
        color #2D323B
        margin-bottom 16px
        font-weight 600
      .basic-text
        font-size 14px
        line-height 20px
        color #57606A
        margin-bottom 37px
      .basic-con
        .basic-title
          margin-bottom 16px
        .data-list
          display flex
          flex-wrap wrap
          .item
            width 270px
            height 310px
            overflow hidden
            transition all 0.2s linear
            margin-bottom 25px
            margin-right 27px
            border 1px solid #E8E8E8
            border-radius 3px
            .item-top
              width 100%
              height 160px
              position relative
              top 0
              left 0
              .item-tag
                position absolute
                bottom 10px
                padding-right 10px
                display flex
                flex-wrap wrap
                align-items center
                height 24px
                overflow hidden
                .tag-list
                  font-size 12px
                  color #ffffff
                  line-height 17px
                  padding 3px 7px
                  background-color rgba(45,50,59,0.35)
                  border-radius 3px
                  margin-left 10px
                  margin-bottom 10px
              .item-bg,img
                width 100%
                height 100%
            .item-con
              padding 22px 15px 0
              height 150px
              box-sizing border-box
              overflow hidden
              position relative
              top 0
              left 0
              .tit
                line-clamp(1)
                font-size 16px
                line-height 22px
                font-weight bold
                color #2D323B
                margin-bottom 16px
              .text-con
                font-size 12px
                line-height 18px
                color #666666
                margin-bottom 15px
                line-clamp(2)
              .list-box
                position absolute
                bottom 23px
                left 0
                width 100%
                padding 0 15px
                display flex
                align-items center
                .list-item
                  display inline-block
                  display flex
                  align-items center
                  margin-right 8px
                  font-size 12px
                  line-height 17px
                  color #666666
                  .icon
                    width 6px
                    height 6px
                    margin-right 2px
                    display inline-block
                  .icon-user
                    background #FFE141
                    border-radius 50% 50%
                  .icon-look
                    background #4D9DFF
                    border-radius 50% 50%
              .share
                position absolute
                bottom 23px
                right 17px
                font-size 12px
                line-height 17px
                color #666666
                display flex
                align-items center
                .icon-share
                  width 10px
                  height 13px
                  margin-right 2px
                  display inline-block
                  background url(../../common/image/icon/modle-copy-ico.png) no-repeat center
                  background-size 10px 13px
            &:nth-of-type(4n)
              margin-right 0
            &:hover
              box-shadow 0 0 10px 0 rgba(74,74,74,0.15)
    .table-code-content
      padding-top 35px
</style>
